<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 500px;
        }
        /* 这段代码的意思是：在屏幕设备上 并且  最大宽度是800像素以内 设置想要的样式 */
        @media screen and (min-width:800px){
            body {
                background-color: skyblue;
            }
        }
        @media screen and (max-width:500px){
            body {
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    <!-- 

    2.媒体查询

        2.1什么是媒体查询

        媒体查询 (Media Query)是CSS3新语法。

            使用@media查询，可以针对不同的媒体类型定义不同的样式
            
            @media可以针对不同的屏幕尺寸设置不同的样式

            当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
            
            目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询


        2.2 语法规范

            media mediatype and | not | only (media feature) {
                css-code;
            )

            用@media开头注意@符号
            
            mediatype媒体类型

            关键字and not only

            media feature媒体特性必须有小括号包含


        1. mediatype查询类型

            将不同的终端设备划分成不同的类型，称为媒体类型

            值         解释说明
            all        用于所有设备
            print      用于打印机和打印预览
            scree      用于电脑屏幕，平板电脑，智能手机等


        2. 关键字

            关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

            and :可以将多个媒体特性连接到一起，相当于“且”的意思
            
            not :排除某个媒体类型，相当于“非”的意思，可以省略。
            
            only :指定某个特定的媒体类型，可以省略。

        3.媒体特性

            每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含

            值                解释说明
            width             定义输出设备中页面可见区域的宽度
            min-width         定义输出设备中页面最小可见区域宽度
            max-width         定义绚出设备中页面最大可见区域宽度

     -->
</body>
</html>